<template>
    <van-nav-bar title="我的拼团" />

    <!-- 标签 -->
    <van-tabs v-model:active="active" title-inactive-color="#000" title-active-color="#ee0a24">
        <van-tab title="全部">
            <!-- 拼团商品列表 -->
            <van-card v-for="item in goodsList" :key="item.id" :price="item.price" :title="item.product"
                :origin-price="item.oldprice" :thumb="item.picture">
                <template #footer>
                    <router-link :to="{ path: '/invitation', query: { id: item.id } }"><van-button
                            type="warning">去拼团</van-button></router-link>
                </template>
            </van-card>
            <van-empty  v-if="collageListStore.stateAll" description="拼团空空如也，快去首页拼团吧！" >
                <van-button  round type="danger" class="bottom-button" @click="goHome">去  拼  团</van-button>
            </van-empty>
        </van-tab>
        <van-tab title="待付款">
            <van-card v-for="item in goodsList" :key="item.id" :price="item.price" :title="item.product"
                :origin-price="item.oldprice" :thumb="item.picture">
                <template #tags>
                    <van-tag plain type="danger">待付款</van-tag>
                </template>
                <template #footer>
                    <van-cell @click="showPopup(item.id)">去支付</van-cell>
                    <van-popup closeable close-icon-position="top-left" v-model:show="show" position="bottom"
                        :style="{ height: '45%' }">
                        <van-card :key="groupGoods.id" :price="groupGoods.price" />
                        <van-contact-card type="edit" :tel="tel" :name="name" to="addressEmit"/>
                        <van-cell is-link @click="showPopup2">支付宝付款 157****3665</van-cell>
                        <van-popup overlay-class="g-overlay" v-model:show="show2" closeable
                            close-icon-position="top-left" position="bottom" :style="{ height: '50%' }">
                            <van-card :key="groupGoods.id" :price="groupGoods.price"></van-card>
                            <van-cell title="支付渠道" size="large" label="银行卡支付" />
                        </van-popup>
                        <van-button @click="confirmPayment">确认付款</van-button>
                    </van-popup>
                </template>
            </van-card>
        </van-tab>
        <van-tab title="拼团中">
            <van-card v-for="item in goodsList" :key="item.id" :price="item.price" :title="item.product"
                :origin-price="item.oldprice" :thumb="item.picture">
                <template #tags>
                    <van-tag plain type="default">两人团</van-tag>
                    <van-tag plain type="danger">拼团中</van-tag>
                </template>
                <template #footer>
                    <router-link :to="{ path: '/invitation', query: { id: item.id } }"><van-button
                            type="warning">邀请好友</van-button></router-link>
                </template>
            </van-card>
        </van-tab>
        <van-tab title="拼团成功">
            <van-card v-for="item in goodsList" :key="item.id" :price="item.price" :title="item.product"
                :origin-price="item.oldprice" :thumb="item.picture">
                <template #tags>
                    <van-tag plain type="warning">拼团成功</van-tag>
                </template>
                <template #footer>
                    <router-link to="/Myorder"><van-button type="default">查看订单</van-button></router-link>
                </template>
            </van-card>
        </van-tab>
        <van-tab title="拼团失败">
            <van-card v-for="item in goodsList" :key="item.id" :price="item.price" :title="item.product"
                :origin-price="item.oldprice" :thumb="item.picture">
                <template #tags>
                    <van-tag plain type="warning">拼团失败</van-tag>
                </template>
                <template #footer>
                    <router-link :to="{ path: '/viewDetails', query: { id: item.id } }"><van-button
                            type="default">查看详情</van-button></router-link>
                </template>
            </van-card>

        </van-tab>
    </van-tabs>


</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { useCart } from '@/hooks/collage'
import { getGroupsDetails } from '@/hooks/groupDetails'
import {usecollageGoodsListStore} from '../stores/Detail-collage'
const collageListStore=usecollageGoodsListStore()

const {  getCurrentGoods, groupGoods, active,useGroup } = getGroupsDetails()
// 为了拿当前商品的id，将getCurrentGoods函数作为参数传入useCart
const { goodsList, list, loading, finished, refreshLoading, onRefresh, refreshing, show,
    show2, showPopup, showPopup2, show3, confirmPayment,goHome } = useCart(getCurrentGoods)

    const tel = ref('13000000000');
const name = ref('张三');
</script>

<style lang="scss" scoped>
:deep(.van-cell__value--alone) {
    color: red;
    text-align: right;
}

:deep(.van-card__bottom) {
    text-align: center;
}

.wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}

.block {
    width: 120px;
    height: 120px;
    background-color: #fff;
}

:deep(.van-overlay) {
    background-color: rgba(80, 72, 72, 0.1);
}


</style>